<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>数据列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="/css/page.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="layui-anim layui-anim-up">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>



      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">


    <div class="layui-row">
        <div class="layui-form layui-col-md12 x-so" >

            <input class="layui-input" placeholder="注册开始日" name="btime" id="start" >
            <input class="layui-input" placeholder="注册截止日" name="etime" id="end"  >
            <input type="text" name="key" id="key"  placeholder="key" autocomplete="off" class="layui-input">
            <button class="layui-btn"  onclick="initLayPage()"><i class="layui-icon">&#xe615;</i>
            </button>

        </div>
    </div>


    <div class="layui-table-body layui-table-main" >
    <table class="layui-table">
        <thead>
        <tr>
            <th nowrap="nowrap">id</th>
            <th nowrap="nowrap">groupId</th>
            <th nowrap="nowrap">version</th>
            <th nowrap="nowrap">cluster</th>
            <th nowrap="nowrap">timeout</th>
            <th nowrap="nowrap">retries</th>

        </tr>
        </thead>
        <tbody id="tab_list">

        </tbody>
    </table>
        <!-- 存放分页的容器 -->
        <div id="layui"></div>

    </div>


    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
        });


        function  exp() {

            key=$('#key').val();
            start=$('#start').val();
            end=$('#end').val();

            window.location.href="exportbaidudetail?key="+key+"&btime="+start+"&etime="+end;
        }

        $(function () {
            initLayPage();
        });

        /**
         * 初始化layui分页
         */

        function initLayPage(pageConf) {
            if(!pageConf){
                pageConf ={};
                pageConf.pageSize = 20;
                pageConf.currentPage = 1;

            }
            key=$('#key').val();

            pageConf.key=key;

            console.log(pageConf);

            $.post("pagelsitquery", pageConf, function (data) {

                layui.use(['laypage', 'layer'], function () {
                    var page = layui.laypage;
                    page.render({
                        elem: 'layui',
                        count: data.total,
                        curr: pageConf.currentPage,
                        limit: pageConf.pageSize,
                        first:"首页",
                        last:"尾页",
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                        jump: function (obj, first) {
                            if (!first) {
                                pageConf.currentPage = obj.curr;
                                pageConf.pageSize = obj.limit;
                                initLayPage(pageConf);
                            }
                        }
                    });
                    fillTable(data.list,(pageConf.currentPage - 1) * pageConf.pageSize); //页面填充
                })
            },"json");
        }
        //填充表格数据
        function fillTable(data,num) {

            var info = '';
            $.each(data, function (index, obj) {

                info += '<tr>'+
                    '<td>' + getValue(obj.id) + '</td>'+
                    '<td>' + getValue(obj.groupId) + '</td>'+
                    '<td>' + getValue(obj.version) + '</td>'+
                    '<td>' + getValue(obj.cluster) + '</td>'+
                    '<td>' + getValue(obj.timeout) + '</td>'+
                    '<td>' + getValue(obj.retries) + '</td>'+

                    '</tr>';
            });
            //alert(info);
            $("#tab_list").html(info);

        }
        function getValue(v) {
            if(v==undefined)return "";
            return v;

        }

    </script>


</body>

</html>